<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="vue.js"></script>
    <script type="text/javascript" src="Velocity.js"></script>
</head>

<body>
    <div id="root">
        <!-- 
    		before-enter enter after-enter 动画函数钩子，动画执行到某一时间点自动执行的函数
			before-leave leave after-leave
    		-->
        <transition name="fade" @before-enter="handleBeforeEnter" @enter="handleEnter" @after-enter="handleAfterEnter">
            <div v-show="show" class="helloworld">hello world</div>
        </transition>
        <button class="btnhandel" @click="handclick">切换</button>
    </div>
    <script type="text/javascript">
    var vm = new Vue({
        el: "#root",
        data: {
            show: true,
        },
        methods: {
            handclick: function() {
                this.show = !this.show
            },
            handleBeforeEnter: function(el) {
                // el.style.color = 'red'
                // console.log('handleBeforeEnter')
                el.style.opacity = '0'
            },
            handleEnter: function(el, done) {
                // setTimeout(() => {
                //     el.style.color = 'blue'
                // }, 2000);
                // setTimeout(() => {
                //     done(); //告诉vue动画执行完毕
                // }, 4000);
                // console.log('handleEnter')
                Velocity(el, { opacity: 1 }, { duration: 2000, complete: done });

            },
            handleAfterEnter: function(el) {
                // el.style.color = '#000';
                console.log('handleAfterEnter')
            }

        }
    })
    </script>
</body>

</html>